<!-- 个人资料页面 -->
<template>
	<view class="title">
		<view>
			<!-- 自定义导航栏 -->
			<view>
				<u-navbar title="个人资料" @leftClick="leftClick" bgColor="#FFFFFF" height="40"></u-navbar>
				<u-gap height="50" bgColor="#F5F5F5" ></u-gap>
			</view>
		<!-- 修改头像单元格(跳转修改头像页面) -->
		<u-cell-group >
			<u-cell :isLink="true"  arrowDirection="left" style="background-color:#FFFFFF" url="../me/picture">
				<u-icon slot="icon" size="65" :name="filePath" label="修改头像" space="20px" radius="100px"></u-icon>
			</u-cell>
		</u-cell-group>
		<view>
			<!-- 生日 DatetimePicker 选择器 -->
			<u-datetime-picker ref="datetimePicker":show="shengri" v-model="value1" mode="date" :minDate="0" :maxDate="1786778555000" 
			@confirm="updateBirthday" @cancel="shengri=false" ></u-datetime-picker>
			<!-- 性别 Picker 选择器 -->
			<u-picker :show="xingbie" :columns="sex" @confirm="updateSex" @cancel="xingbie=false"></u-picker>
			<!-- 常住地 Picker 选择器 -->
			<u-picker mode="region" :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler" @cancel="show=false"></u-picker>
		</view>
		<u-cell-group >
			<!-- 间隔(样式请无视) -->
			<u-gap height="10" bgColor="#F5F5F5" ></u-gap>
			<!-- 修改用户昵称单元格 (跳转修改用户昵称页面)-->
			<u-cell :isLink="true" arrowDirection="left" style="background-color:#FFFFFF;" url="../me/nickname"> 
				<u-icon slot="icon" name="用户昵称" :label="userName" space="20px"></u-icon>
			</u-cell>
			<!-- 修改性别单元格(调用性别 Picker 选择器) -->
			<u-cell :isLink="true" arrowDirection="left" style="background-color:#FFFFFF;" @click="xingbie = true">
				<u-icon slot="icon" name="性别" label="男" v-if="userSex==0" space="53px"></u-icon>
				<u-icon slot="icon" name="性别" label="女" v-if="userSex==1" space="53px"></u-icon>
			</u-cell>
			<!-- 修改常驻地单元格(调用常住地 Picker 选择器) -->
			<u-cell :isLink="true" arrowDirection="left" style="background-color:#FFFFFF;"  @click="show = true">
				<u-icon slot="icon" name="常驻地" :label="userAddress" space="37px"></u-icon>
			</u-cell>
			<!-- 修改生日单元格(调用生日 DatetimePicker 选择器) -->
			<u-cell :isLink="true" arrowDirection="left"  style="background-color:#FFFFFF;" mode="date"  @click="shengri= true">
				<u-icon slot="icon" name="生日" :label="userBirthday" space="53px"></u-icon>
			</u-cell>
			<!-- 修改个性签名单元格(跳转修改签名页面) -->
			<u-cell :isLink="true" arrowDirection="left" style="background-color:#FFFFFF;" url="../me/autograph">
				<u-icon slot="icon" name="个性签名" :label="userAutograph" space="20px"></u-icon>
			</u-cell>
		</u-cell-group>
	    </view>
	</view>
</template>

<script>
	export default {
		created() {
		    /*用户详情*/
		    this.UserAll();
		  },
		data() {
			return {
				filePath: 'https://cdn.uviewui.com/uview/album/1.jpg',//默认头像图片路径
				xingbie: false,//性别 Picker 选择器窗口参数
				shengri: false,//生日 DatetimePicker 选择器窗口参数
				show: false,//常住地 Picker 选择器窗口参数
				sex: [//性别 Picker 选择器参数
				['男', '女']
				 ],
				value1: Number(new Date()),//当前时间
				userName:'',//用户昵称
				userSex:'0',//性别
				userAddress:'',//常住地
				userBirthday:'',//生日
				userAutograph:'',//签名
				Birthday:{//修改对象(修改生日属性)
					userId:"",//参数1:用户id
					userBirthday:null,//参数2:生日
				},
				Sex:{//修改对象(修改性别属性)
					userId:"",//参数1:用户id
					userSex:"",//参数2:性别
				},
				Address:{//修改对象(修改常住地属性)
					userId:"",//参数1:用户id
					userAddress:"",//参数2:常住地
				},
				 columns: [//常住地 Picker 选择器一级参数列表
					['北京', '天津','山东省','江苏省','安徽省','浙江省','福建省','上海','江西省','广东省','广西省','海南省','湖北省','湖南省','河南省','河北省','山西省','内蒙古','宁夏','新疆',
					'青海省','陕西省','甘肃省','四川省','云南省','贵州省','西藏','重庆','辽宁省','吉林省','黑龙江省'],
					['北京市'],
				],
					columnData: [//常住地 Picker 选择器二级参数列表
						['北京市'],
						['天津市'],
						['济南市','青岛市','淄博市','枣庄市','东营市','烟台市','潍坊市','济宁市','泰安市','威海市','日照市','莱芜市','临沂市','德州市','聊城市','滨州市','菏泽市'],
						['南京市','无锡市','徐州市','常州市','苏州市','南通市','连云港市','淮安市','盐城市','扬州市','镇江市','泰州市','宿迁市'],
						['合肥市','亳州市','淮北市','宿州市','阜阳市','蚌埠市','淮南市','滁州市','六安市','巢湖市','芜湖市','马鞍山市','安庆市','池州市','铜陵市','宣城市','黄山市'],
						['杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市','衢州市','舟山市','台州市','丽水市'],
						['福州市','厦门市','莆田市','三明市','泉州市','漳州市','南平市','龙岩市','宁德市'],
						['上海市'],
						['南昌市','九江市','景德镇市','萍乡市','新余市','鹰潭市','赣州市','宜春市','上饶市','吉安市','抚州市'],
						['广州市','深圳市','珠海市','汕头市','韶关市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'],
						['防城港市','南宁市','崇左市','柳州市','来宾市','桂林市','梧州市','贺州市','玉林市','贵港市','百色市','钦州市','河池市','北海市'],
						['海口市','三亚市'],
						['武汉市','黄石市','襄樊市','荆州市','宜昌市','十堰市','孝感市','荆门市','鄂州市','黄冈市','咸宁市','随州市','恩施土家族苗族自治州','潜江市','仙桃市','天门市'],
						['长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','郴州市','益阳市','永州市','怀化市','娄底市','吉首市'],
						['郑州市','开封市','洛阳市','平顶山市','许昌市','漯河市','三门峡市','南阳市','商丘市','信阳市','周口市','驻马店市','安阳市','鹤壁市','新乡市','焦作市','濮阳市'],
						['石家庄','唐山市','秦皇岛','邯郸市','邢台市','张家口市','承德市','廊坊市','沧州市','保定市','衡水市'],
						['太原市','大同市','朔州市','阳泉市','长治市','忻州市','吕梁市','晋中市','临汾市','运城市','晋城市'],
						['包头市','乌海市','通辽市','鄂尔多斯市','呼伦贝尔市','巴彦淖尔市','乌兰察布市','锡林郭勒盟','兴安盟','阿拉善盟'],
						['银川市','石嘴山市','吴忠市','固原市','中卫市'],
						['乌鲁木齐','克拉玛依市','石河子市','阿拉尔市','图木舒克市','五家渠市','北屯市'],
						['西宁市','海东地区','海北州','黄南州','海南州','果洛州','玉树州','海西州'],
						['西安市','铜川市','宝鸡市','咸阳市','渭南市','延安市','汉中市','榆林市','安康市','商洛市'],
						['兰州市','嘉峪关市','金昌市','白银市','天水市','武威市','张掖市','酒泉市','平凉市','庆阳市','定西市','陇南市','临夏回族自治州','甘南藏族自治州'],
						['成都市','自贡市','攀枝花市','泸州市','德阳市','绵阳市','广元市','遂宁市','内江市','乐山市','南充市','眉山市','宜宾市','广安市','达州市','雅安市','巴中市','资阳市','阿坝藏族羌族自治州','甘孜藏族自治州','凉山彝族自治州'],
						['昆明市','曲靖市','玉溪市','丽江市','思茅市','普洱市','保山市','昭通市','文山州','临沧市','红河州','西双版纳州','楚雄州','大理州','德宏州','怒江州','迪庆州'],
						['贵阳市','遵义市','六盘水市','安顺市','毕节地区','铜仁地区','黔西南州','黔东南州','黔南州'],
						['拉萨市'],
						['重庆市'],
						['沈阳市','大连市','鞍山市','抚顺市','本溪市','丹东市','锦州市','营口市','阜新市','辽阳市','盘锦市','铁岭市','朝阳市','葫芦岛市'],
						['长春市','吉林市','四平市','辽源市','通化市','白山市','松原市','白城市','延边朝鲜族自治州'],
						['哈尔滨市','齐齐哈尔市','佳木斯市','鹤岗市','大庆市','鸡西市','双鸭山市','伊春市','牡丹江市','黑河市','七台河市','绥化市','大兴安岭地区'],
					],
						
			}
		},
		onReady() {
				},
		methods: {
			/*用户详情*/
			UserAll() {
				//根据token获取当前登录用户信息
				uni.$u.http.post('http://localhost:8090/login/User/selectById',sessionStorage.getItem("token")).then(res => {	
					//生日赋值
					this.userBirthday=res.data.object.userBirthday.substr(5,5);
					//性别赋值
					this.userSex=res.data.object.userSex;
					//常住地赋值
					this.userAddress=res.data.object.userAddress;
					//用户昵称赋值
					this.userName=res.data.object.userName;
					//签名赋值
					this.userAutograph=res.data.object.userAutograph;
					//修改对象(修改性别属性)用户id赋值
					this.Sex.userId=res.data.object.userId;
					//修改对象(修改生日属性)用户id赋值
					this.Birthday.userId=res.data.object.userId;
					//修改对象(修改常住地属性)用户id赋值
					this.Address.userId=res.data.object.userId;
					//根据图片id获取图片路径
					uni.$u.http.get('http://localhost:8090/login/User/pictureById/'+res.data.object.userFileId).then(res => {
						//图片路径赋值
						this.filePath=res.data.object;
						})
				})
			},
			/* 修改对象(修改性别属性)性别 */
			updateSex(e){
				//关闭性别 Picker 选择器窗口
				this.xingbie=false;
				//获取性别 Picker 选择器参数
				this.userSex=e.indexs[0];
				//对象(修改性别属性)获取性别 Picker 选择器参数
				this.Sex.userSex=e.indexs[0];
				//修改性别
				uni.$u.http.post('http://localhost:8090/login/User/updateUser',this.Sex).then(res => {
					if(res.data.object.state){
						console.log(res.data.object.msg);
					}
				});
			},
			/* 修改对象(修改生日属性) */
			updateBirthday(e){
				//关闭生日 DatetimePicker 选择器窗口
				this.shengri=false;
				//获取生日 DatetimePicker 选择器窗口参数(格式:"yyyy-mm-dd")
				this.userBirthday=uni.$u.timeFormat(e.value,'yyyy-mm-dd');
				//对象(修改生日属性)获取生日 DatetimePicker 选择器窗口参数
				this.Birthday.userBirthday=this.userBirthday;
				//修改生日
				uni.$u.http.post('http://localhost:8090/login/User/updateUser',this.Birthday).then(res => {
						if(res.data.object.state){
						console.log(res.data.object.msg);
					}
				});
				//获取生日 DatetimePicker 选择器窗口参数(格式:"mm-dd")
				this.userBirthday=uni.$u.timeFormat(e.value,'mm-dd');
			},
			/* 常住地二级联动(官网默认最好别动) */
			changeHandler(e) {
			                const {
			                    columnIndex,
			                    value,
			                    values, // values为当前变化列的数组内容
			                    index,
								// 微信小程序无法将picker实例传出来，只能通过ref操作
			                    picker = this.$refs.uPicker
			                } = e
			                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
			                if (columnIndex === 0) {
			                    // picker为选择器this实例，变化第二列对应的选项
			                    picker.setColumnValues(1, this.columnData[index])
			                }
			            },
			// 回调参数为包含columnIndex、value、values
			/* 修改修改对象(修改常住地属性) */
			confirm(e) {
				//获取常住地 Picker 选择器窗口参数
				this.userAddress=e.value[0]+'-'+e.value[1];
				//对象(修改常住地属性)获取常住地 Picker 选择器窗口参数
				this.Address.userAddress=this.userAddress;
				//修改常住地
				uni.$u.http.post('http://localhost:8090/login/User/updateUser',this.Address).then(res => {
						if(res.data.state){
						console.log(res.data.object.msg);
					}
				});
				//关闭常住地 Picker 选择器窗口
				this.show = false
			},
			
			/* 顶部导航栏左侧按钮点击事件 */
			leftClick() {
				//跳转回个系统设置页面
				uni.redirectTo({
					url: '../me/setUp0'
				})
			},
					
		},
		
		      
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-icon__img{
			border-radius: 30px;
		}
	page{
	  height:100%
	}
	.title {
		position: relative;
		  background-color: #F5F5F5;
		  height: 100%;
	}
	u-icon {
					position: absolute;
					right: 30rpx;
					top: 33rpx;
				}
				
				
</style>